<template>
  <div>
    <div class="tjcpym" :class="$store.state.tjwz==true?'gl_tjym':''">
      <div class="tjcpym_title" v-if="$store.state.tjwz">
        <h3 v-if="$store.state.xiugaiflag==''">添加产品</h3>
        <h3 v-if="$store.state.xiugaiflag!=''">修改产品</h3>
        <a-icon @click="quxiao" type="close" />
      </div>
      <div class="tjcpym_tab">
        <a-icon type="crown" class="bdyh_ico" />
        <a-tabs :defaultActiveKey="wztabs" @change="callback">
          <a-tab-pane tab="基本信息" key="1" forceRender>
            <div class="tjcpym_cg">
              <div class="cg_n gj_n">
                <div class="tjcpym_gj">
                  <ul>
                    <li>
                      <div class="form_inp">
                        <span class="span_rig">
                          <span class="bt">*</span>型号：
                        </span>
                        <a-auto-complete
                          :disabled="form.ly"
                          :dataSource="xllist"
                          style="width: 52%"
                          placeholder="请输入型号"
                          :filterOption="filterOption"
                          @change="xlchange"
                          v-model="form.xl"
                        />
                        <span class="bx" v-if="xl==''">* 必填</span>
                      </div>
                    </li>
                    <li>
                      <div class="form_inp">
                        <span class="span_rig">
                          <span class="bt">*</span>品牌：
                        </span>
                        <a-auto-complete
                          :disabled="form.ly"
                          :dataSource="pplist"
                          style="width: 52%"
                          placeholder="请输入品牌"
                          :filterOption="filterOption"
                          v-model="form.pp"
                          @change="ppchange"
                        />
                        <span class="bx" v-if="pp==''">* 必填</span>
                      </div>
                    </li>
                    <li>
                      <div class="form_inp gjfl_header">
                        <div class="djfl">
                          <span class="span_rig">
                            <span class="bt">*</span> 产品分类：
                          </span>
                          <a-auto-complete
                            :disabled="form.ly"
                            :dataSource="cpfllist"
                            style="width: 200px"
                            placeholder="产品分类"
                            :filterOption="filterOption"
                            v-model="form.cpfl"
                            @change="flchange"
                          />
                          <span class="bx" v-if="cpfl==''">* 必填</span>
                        </div>

                        <div class="glfl">
                          <a-button @click="glfl">管理分类</a-button>
                          <div class="wzflym" v-if="$store.state.wzfl">
                            <glfl class="wz"></glfl>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="form_inp up_li fs_li">
                        <span class="span_rig">产品图片：</span>
                        <div class="clearfix tjcpimg">
                          <a-upload
                            action="https://www.bearing.cn"
                            listType="picture-card"
                            :fileList="fileList"
                            @preview="handlePreview"
                            @change="handleChange"
                            accept=".jpg, .png"
                          >
                            <div v-if="fileList.length < 4">
                              <a-icon type="plus" />
                              <div class="ant-upload-text">上传</div>
                            </div>
                          </a-upload>
                          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%" :src="previewImage" />
                          </a-modal>
                        </div>
                      </div>
                      <div class="up_li two_li"></div>
                      <div class="form_inp chicun up_li">
                        <span class="span_rig">最小起批量：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.zdqsl"
                          class="select"
                          size="large"
                          :min="1"
                          :defaultValue="3"
                        />
                      </div>
                    </li>

                    <li>
                      <div class="form_inp chicun">
                        <span class="span_rig">内径：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.nj"
                          class="select"
                          size="large"
                          :min="1"
                          :max="100000"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">外径：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.wj"
                          class="select"
                          size="large"
                          :min="1"
                          :max="100000"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">宽度：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.kd"
                          class="select"
                          size="large"
                          :min="1"
                          :max="100000"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">重量：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.zl"
                          class="select"
                          size="large"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">库房：</span>
                        <a-input :disabled="form.ly" v-model="form.kf" class="select" placeholder />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">产地：</span>
                        <a-input :disabled="form.ly" v-model="form.cd" class="select" placeholder />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">包装：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.cpbz"
                          class="select"
                          placeholder
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">材料：</span>
                        <a-input
                          :disabled="form.ly"
                          v-model="form.cailiao"
                          class="select"
                          placeholder
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">现货数量：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.kgsl"
                          class="select"
                          size="large"
                          :min="1"
                          :defaultValue="3"
                        />
                      </div>
                      <div
                        class="form_inp chicun"
                        v-if="priceManage.WLTEJIA_ok==1||$store.state.xiugaiflag==''"
                      >
                        <span class="span_rig">网络特价：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.money"
                          class="select"
                          size="large"
                          :min="0.1"
                          :defaultValue="3"
                        />
                      </div>
                      <div
                        class="form_inp chicun"
                        v-if="priceManage.PAIJIA_ok==1||$store.state.xiugaiflag==''"
                      >
                        <span class="span_rig">牌价：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.PAIJIA"
                          class="select"
                          size="large"
                          :min="0.1"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">期货数量：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.qhsl"
                          class="select"
                          size="large"
                          :min="1"
                          :defaultValue="3"
                          @change="qhslkeyup"
                        />
                      </div>
                      <div
                        class="form_inp chicun"
                        v-if="priceManage.WLLSJ_ok==1||$store.state.xiugaiflag==''"
                      >
                        <span class="span_rig">价格1：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.WLLSJ"
                          class="select"
                          size="large"
                          :min="0.1"
                          :defaultValue="3"
                        />
                      </div>
                      <div
                        class="form_inp chicun"
                        v-if="priceManage.WLPFJ_ok==1||$store.state.xiugaiflag==''"
                      >
                        <span class="span_rig">价格2：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.WLPFJ"
                          class="select"
                          size="large"
                          :min="0.1"
                          :defaultValue="3"
                        />
                      </div>
                      <div
                        class="form_inp chicun"
                        v-if="priceManage.WLZDJ_ok==1||$store.state.xiugaiflag==''"
                      >
                        <span class="span_rig">价格3：</span>
                        <a-input-number
                          :disabled="form.ly"
                          v-model="form.WLZDJ"
                          class="select"
                          size="large"
                          :min="0.1"
                          :defaultValue="3"
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">备注：</span>
                        <a-textarea
                          class="select"
                          :disabled="form.ly"
                          v-model="form.source"
                          placeholder
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">货物所在地：</span>
                        <a-input
                          class="select"
                          :disabled="form.ly"
                          v-model="form.sfzy"
                          placeholder
                        />
                      </div>
                    </li>

                    <!-- <li>
                      <div class="form_inp chicun">
                        <span class="span_rig">备注：</span>
                        <a-textarea
                          class="select"
                          :disabled="form.ly"
                          v-model="form.source"
                          placeholder
                        />
                      </div>
                      <div class="form_inp chicun">
                        <span class="span_rig">货物所在地：</span>
                        <a-input
                          class="select"
                          :disabled="form.ly"
                          v-model="form.sfzy"
                          placeholder
                        />
                      </div>
                    </li>-->
                  </ul>
                </div>

                <div class="cg_sunbtn">
                  <a-button type="primary" @click="tjcpsub">提交</a-button>
                  <a-button @click="quxiao">取消</a-button>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane tab="产品介绍" key="2">
            <div class="tjcpym_cg">
              <div class="cg_n">
                <!-- 富文本编辑器 -->
                <div class="edit_container">
                  <!-- <quill-editor
                    v-model="form.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                  ></quill-editor>-->
                  <Editor ref="froalaEditor" @open="init" @on-change="changeContent"></Editor>
                </div>
                <!-- 富文本编辑器 -->
                <div class="cg_sunbtn">
                  <a-button type="primary" @click="tjcpsub">保存</a-button>
                  <a-button @click="quxiao">取消</a-button>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane tab="百度优化" key="3">
            <div class="tjcpym_cg">
              <div class="cg_n bdyh_n">
                <div class="tjcpym_gj">
                  <ul>
                    <li>
                      <div class="form_inp bdyh_input">
                        <span class="bdyh_rig">产品浏览器标题：</span>
                        <a-input v-model="form.browserTitle" class="f_in" placeholder />
                      </div>
                    </li>
                    <li>
                      <div class="form_inp bdyh_input">
                        <span class="bdyh_rig">产品详情页关键字：</span>
                        <a-textarea v-model="form.browserKeyword" class="f_in text" :rows="4" />
                      </div>
                    </li>
                    <li>
                      <div class="form_inp bdyh_input">
                        <span class="bdyh_rig">产品详情页描述：</span>
                        <a-textarea v-model="form.browserDescribe" class="f_in text" :rows="4" />
                      </div>
                    </li>
                  </ul>
                </div>

                <div class="cg_sunbtn">
                  <a-button type="primary" @click="tjcpsub">保存</a-button>
                  <a-button @click="quxiao">取消</a-button>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import glfl from "../glfl/glfl.vue";
import moment from "moment";
import qs from "qs";
import Editor from "../froalaed/froalaed.vue";

//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}
export default {
  inject: ["reload"],
  filters: {
    formatDate() {
      let data = new Date();
      return moment(data).format("YYYY-MM-DD");
    }
  },
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      wztabs: "1",
      //  -----------------------------
      content:
        this.$store.state.xiugaiflag != "" ? this.$store.state.content : "", //富文本编辑器
      pushTime:
        this.$store.state.xiugaiflag != ""
          ? moment(this.$store.state.pushTime).format("YYYY-MM-DD")
          : "", //获取发布时间
      picList:
        this.$store.state.xiugaiflag != "" ? this.$store.state.picList : "", //获取列表图片

      editorOption: {}, //富文本编辑器
      dataSource: [], //
      radiovalue: "",

      uploading: false,
      exelUrl: "", //exel表格的baes64格式路径
      exflage: false, //exel表格
      //   sjdrmodal: false,
      xlshz: "", //上传的exel表格的后缀名
      //库存上传-----------------
      //详情介绍-----开始
      wzfl: false,
      //详情介绍-----结束
      xl: "",
      pp: "",
      cpfl: "",
      previewVisible: false,
      previewImage: "",
      //form表单
      xllist: [],
      pplist: [],
      cpfllist: [],
      form: {
        xl: "",
        pp: "",
        cpfl: "",
        nj: "",
        wj: "",
        kd: "",
        zl: "",
        kf: "",
        cd: "",
        cailiao: "",
        cpbz: "",
        kgsl: "",
        money: "",
        PAIJIA: "",
        qhsl: "",
        WLLSJ: "",
        WLPFJ: "",
        WLZDJ: "",
        source: "",
        tjcpimg: [],
        tjcpimgUrl: [],
        content: "",
        browserTitle: "",
        browserKeyword: "",
        browserDescribe: "",
        ly: false,
        sfzy: "",
        zdqsl: ""
        //库存上传-----------------
      },
      fileList: [],
      priceManage: ""
    };
  },
  components: {
    glfl,
    // fffffffffffffffffffffffffffffffff
    Editor
  },
  methods: {
    moment,
    xlchange() {
      console.log(this.form.xl);
      this.getxllist(this.form.xl);
    },
    ppchange() {
      console.log(this.form.pp);
      this.getpplist(this.form.pp);
    },
    flchange() {
      console.log("111");
      this.getfllist(this.form.cpfl);
    },
    callback(key) {
      this.wztabs = key;
      console.log(key);
    },
    // 基本信息-------------------开始
    // fffffffffffffffffffffffffffffffff
    init() {
      console.log("!1111111111");
      this.$nextTick(() => {
        console.log(this.content);
        this.$refs.froalaEditor.setHtml(this.content);
      });
    },
    changeContent(html) {
      this.content = html;
    },
    // fffffffffffffffffffffffffffffffff
    //富文本编辑器
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    saveHtml: function(event) {
      alert(this.content);
    },
    //富文本编辑器
    // 基本信息-------------------结束
    // 详情介绍-------------------开始

    //点击分类
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    onChangedate(date, dateString) {
      console.log(date, dateString);
      this.pushTime = dateString;
    },

    //数据导入--文件上传
    scsjexl() {
      if (this.radiobtval != "" && this.exelUrl != "") {
        console.log(this.exelUrl);
        this.axios
          .post(
            "ProParamUpload.php",
            qs.stringify({
              ids: this.$store.state.ids,
              tableType: this.radiobtval,
              fileBase64: this.exelUrl,
              fileSuffix: this.xlshz
            })
          )
          .then(res => {
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$store.commit("getSampleDetail");
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        if (this.radiobtval == "") {
          this.$notification["error"]({
            message: "失败",
            description: "请选择表头类型"
          });
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "上传文件不能为空"
          });
        }

        return;
      }
    },

    //上传产品图片----开始
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },

    glfl() {
      this.$store.state.wzfl = true;
    },

    // 详情介绍-------------------结束
    //取消
    quxiao() {
      this.$store.state.tjwz = false;
      this.$store.state.xiugaiflag = "";
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    //添加产品保存
    tjcpsub() {
      if (this.form.xl != "" && this.form.pp != "" && this.form.cpfl != "") {
        if (this.$store.state.xiugaiflag == "") {
          for (var i = 0; i < this.fileList.length; i++) {
            this.form.tjcpimg.push(this.fileList[i].thumbUrl);
          }
          this.axios
            .post(
              "kucun/AddProData.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                xl: this.form.xl,
                sccjc: this.form.pp,
                tcfenleiName: this.form.cpfl,
                proPic: this.form.tjcpimg,
                zdqsl: this.form.zdqsl,
                nj: this.form.nj,
                wj: this.form.wj,
                kd: this.form.kd,
                zl: this.form.zl,
                kfmc: this.form.kf,
                sccd: this.form.cd,
                wlkgsl: this.form.kgsl,
                sfzy: this.form.sfzy,
                wltejia: this.form.money,
                qhsl: this.form.qhsl,
                PAIJIA: this.form.PAIJIA,
                WLLSJ: this.form.WLLSJ,
                WLPFJ: this.form.WLPFJ,
                WLZDJ: this.form.WLZDJ,
                beizhu: this.form.source,
                remark: this.content,
                cailiao: this.form.cailiao,
                cpbz: this.form.cpbz,
                browserTitle: this.form.browserTitle,
                browserKeyword: this.form.browserKeyword,
                browserDescribe: this.form.browserDescribe,
                nbdwbm: this.$parent.nbdwbm, //寄售公司手机
                nbdwmc: this.$parent.nbdwmc //寄售公司名称
              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.form.tjcpimg = [];
                this.reload();
                // this.$parent.handleChangelist(this.$parent.pagination);

                this.$store.state.tjwz = false;
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
                this.form.tjcpimg = [];
              }
            });
        } else {
          for (var i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].url != undefined) {
              this.form.tjcpimg.push(this.form.tjcpimgUrl[i]);
            } else {
              this.form.tjcpimg.push(this.fileList[i].thumbUrl);
            }
          }

          this.axios
            .post(
              "kucun/AdminBusinessEditKc.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                id_num: this.$store.state.cpglxg.ID_NUM,
                xl: this.form.xl,
                sccjc: this.form.pp,
                tcfenleiName: this.form.cpfl,
                proPic: this.form.tjcpimg,
                zdqsl: this.form.zdqsl,
                nj: this.form.nj,
                wj: this.form.wj,
                kd: this.form.kd,
                zl: this.form.zl,
                kfmc: this.form.kf,
                qhsl: this.form.qhsl,
                sccd: this.form.cd,
                wlkgsl: this.form.kgsl,
                wltejia: this.form.money,
                PAIJIA: this.form.PAIJIA,
                WLLSJ: this.form.WLLSJ,
                WLPFJ: this.form.WLPFJ,
                WLZDJ: this.form.WLZDJ,

                beizhu: this.form.source,
                sfzy: this.form.sfzy,
                remark: this.content,
                cailiao: this.form.cailiao,
                cpbz: this.form.cpbz,
                browserTitle: this.form.browserTitle,
                browserKeyword: this.form.browserKeyword,
                browserDescribe: this.form.browserDescribe
              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.form.tjcpimg = [];
                this.$parent.handleChangelist(this.$parent.pagination);

                this.$store.state.tjwz = false;
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
                this.form.tjcpimg = [];
              }
            });
        }
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "请将内容填写完整"
        });
      }
    },
    //型号列表
    getxllist() {
      this.axios
        .post(
          "kucun/SelectXhList.php",
          qs.stringify({
            xl: this.form.xl
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.xllist = [];

            for (var i = 0; i < res.data.result.length; i++) {
              if (res.data.result[i].XL != null) {
                this.xllist.push(res.data.result[i].XL);
              }
            }
          }
        });
    },
    //品牌列表
    getpplist() {
      this.axios
        .post(
          "kucun/SelectPpList.php",
          qs.stringify({
            sccjc: this.form.pp,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.pplist = [];
            for (var i = 0; i < res.data.result.length; i++) {
              this.pplist.push(res.data.result[i].proName);
            }
          }
        });
    },
    //产品分类列表
    getfllist() {
      this.axios
        .post(
          "kucun/SelectProList.php",
          qs.stringify({
            pro: this.form.cpfl,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.cpfllist = [];

            for (var i = 0; i < res.data.result.length; i++) {
              this.cpfllist.push(res.data.result[i].proName);
            }
          }
        });
    },
    qhslkeyup() {
      //   let num='^[0-9]+(.[0-9]{1,2})?$'
      // this.qhsl=num.test(this.qhsl)
      // if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value)){
      // event.returnValue=false
      // }
    }
  },

  created() {
    this.getxllist(); //型号提醒列表
    this.getpplist(); //品牌提醒列表
    this.getfllist(); //分类提醒里边
    if (sessionStorage.getItem("priceManage")) {
      this.priceManage = JSON.parse(sessionStorage.getItem("priceManage"));
      console.log(this.priceManage);
      // for (var i = 0; i < this.columns.length; i++) {
      //   if (this.columns[i].dataIndex == "WLTEJIA") {
      //     console.log(i);
      //     if (this.priceManage.WLTEJIA_ok != 1) {
      //       this.columns.splice(i, 1);
      //     }
      //   }
      //   if (this.columns[i].dataIndex == "WLLSJ") {
      //     if (this.priceManage.WLLSJ_ok != 1) {
      //       this.columns.splice(i, 1);
      //     }
      //   }
      //   if (this.columns[i].dataIndex == "WLPFJ") {
      //     if (this.priceManage.WLPFJ_ok != 1) {
      //       this.columns.splice(i, 1);
      //     }
      //   }
      //   if (this.columns[i].dataIndex == "WLZDJ") {
      //     if (this.priceManage.WLZDJ_ok != 1) {
      //       this.columns.splice(i, 1);
      //     }
      //   }
      //   if (this.columns[i].dataIndex == "PAIJIA") {
      //     if (this.priceManage.PAIJIA_ok != 1) {
      //       this.columns.splice(i, 1);
      //     }
      //   }
      // }
    }
    //产品修改表单数据渲染
    if (this.$store.state.xiugaiflag != "") {
      this.form.xl = this.$store.state.cpglxg.XL;
      this.form.pp = this.$store.state.cpglxg.SCCJC;
      this.form.cpfl = this.$store.state.cpglxg.ZLMC;
      this.form.nj = this.$store.state.cpglxg.nj;
      this.form.wj = this.$store.state.cpglxg.wj;
      this.form.kd = this.$store.state.cpglxg.kd;
      this.form.kf = this.$store.state.cpglxg.KFMC;
      this.form.cd = this.$store.state.cpglxg.SCCD;
      this.form.kgsl = this.$store.state.cpglxg.WLKGSL;
      this.form.qhsl = this.$store.state.cpglxg.qhsl;
      this.form.zl = this.$store.state.cpglxg.zl;

      this.form.money = this.$store.state.cpglxg.WLTEJIA;
      this.form.PAIJIA = this.$store.state.cpglxg.PAIJIA;
      this.form.WLLSJ = this.$store.state.cpglxg.WLLSJ;
      this.form.WLPFJ = this.$store.state.cpglxg.WLPFJ;
      this.form.WLZDJ = this.$store.state.cpglxg.WLZDJ;

      this.form.source = this.$store.state.cpglxg.BEIZHU;
      this.content = this.$store.state.cpglxg.remark; //富文本
      this.form.cpbz = this.$store.state.cpglxg.cpbz; //包装
      this.form.cailiao = this.$store.state.cpglxg.cailiao; //包装
      this.form.sfzy = this.$store.state.cpglxg.sfzy; //货物所在地

      this.form.browserTitle = this.$store.state.cpglxg.browserTitle;
      this.form.browserKeyword = this.$store.state.cpglxg.browserKeyword;
      this.form.browserDescribe = this.$store.state.cpglxg.browserDescribe;
      this.form.ly =
        this.$store.state.cpglxg.ly.trim() == "软件" ? true : false;

      this.form.zdqsl = this.$store.state.cpglxg.zdqsl; //最小起批量
      this.form.tjcpimgUrl = this.$store.state.cpglxg.pic; //图片
      //图片处理
      if (this.form.tjcpimgUrl != " " && this.form.tjcpimgUrl != null) {
        for (var i = 0; i < this.form.tjcpimgUrl.length; i++) {
          let list = {
            uid: i,
            name: " ",
            status: " ",
            url:
              "https://image.bearing.cn/qy/member/imgcp/" +
              this.$store.state.cpglxg.bearingid +
              "/" +
              this.form.tjcpimgUrl[i]
          };
          this.fileList.push(list);
        }
      }
    }
  }
};
</script>

<style lang='less'>
.ant-calendar-picker-container {
  z-index: 99999 !important;
}
.tjcpym {
  width: 98%;
  margin: 0 auto;
  position: relative;
  top: 66px;
  text-align: left;
  background-color: #fff;
  .tjcpimg {
    display: inline-block;
    width: 76%;
    vertical-align: top;
    .ant-upload-select-picture-card {
      border: 1px dashed #d9d9d9 !important;
      width: 104px !important;
      height: 104px !important;
      background-color: #fafafa !important;
    }
  }

  .ant-tabs-nav-container {
    line-height: 0 !important;
  }
  .tjcpym_tab {
    position: relative;
    width: 100%;
    padding: 0px 20px;
    .bdyh_ico {
      position: absolute;
      top: 17px;
      left: 329px;
      color: #fc6500;
      font-size: 18px;
    }
    .ant-tabs-tab-active {
      color: #1890ff;
    }
    .ant-tabs-tab:hover {
      color: #1890ff;
    }
    .ant-tabs-ink-bar {
      background-color: #1890ff;
      height: 3px;
    }
    .ant-tabs-tab {
      text-align: center;
      font-size: 16px;
      margin-right: 40px !important;
      padding: 25px !important;
    }
    .tjcpym_cg {
      position: relative;
      width: 100%;
      height: 665px;

      .cg_n {
        position: absolute;
        left: 5px;
        padding: 20px 50px;
        width: 99%;
        height: 98%;
        border: 1px solid #ccc;
        // box-shadow: 0px 0px 7px #ccc;
        @media (max-width: 1400px) {
          .tjcpym_gj {
            overflow-y: scroll;
            height: 450px;
          }
         
        }
        .cg_inp {
          width: 50%;
        }
        .red {
          margin-left: 10px;
          color: red;
          font-size: 18px;
        }
        .edit_container {
          position: absolute;
          top: 78px;
          width: 89%;

          .ql-container {
            height: 320px !important;
          }
        }
        .cg_sunbtn {
          position: absolute;
          bottom: 20px;
          width: 95%;
          text-align: center;
          button {
            width: 12%;
            margin: 0 20px;
          }

          .ant-btn-default:hover {
            color: #fff !important;
            border: 0 !important;
            background-color: #1890ff !important;
          }
        }
      }
      .gj_n {
        width: 99%;
        height: 97%;
        .wzflym {
          position: fixed;
          height: 867px;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 999;
          background: rgba(0, 0, 0, 0.1);
          .wz {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            .wzfl {
              top: 47px !important;
            }
          }
        }
      }
      .bdyh_n {
        height: 97%;
        width: 99%;
      }
      .tjcpym_gj {
        line-height: 45px;

        .gjfl_header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .djfl {
            width: 53%;
          }
          .glfl {
            width: 49.5%;
            text-align: left;
          }
        }
        .foot_inp {
          bottom: 0px;
          left: -21px;
        }
        // .fjsc {
        //   bottom: 38px;
        // }
        .bdyh_input {
          margin: 30px 0;
        }
        // .zindex {
        //   z-index: 9999;
        // }
        ul {
          li {
            .form_inp {
              position: relative;
              .bx {
                color: red;
                margin-left: 10px;
              }
              .f_in {
                width: 52%;
              }
              .text {
                vertical-align: top;
              }
              .span_rig {
                display: inline-block;
                width: 85px;
                text-align: right;
                .bt {
                  color: red;
                }
              }
              .bdyh_rig {
                display: inline-block;
                width: 200px;
                text-align: right;
              }
              // .span_dpt {
              //   width: 90px;
              // }
              .date {
                margin-right: 10px;
              }
              .ant-upload.ant-upload-drag {
                display: inline-block;
                width: 52% !important;
                vertical-align: top;
                background: transparent !important;
                height: 100px;
                line-height: 100px;
                p {
                  margin: 0 !important;
                  .anticon {
                    color: #ccc;
                  }
                  .add {
                    overflow: hidden;
                    font-size: 18px;
                    display: inline-block;
                  }
                }
                .ant-upload {
                  border: 1px dotted #ccc !important;
                }
              }

              .ant-upload.ant-upload-drag .ant-upload {
                padding: 0px 0 !important;
                border: 1px solid #ccc;
                //   background-color: #1890ff !important;
              }
              .ant-upload.ant-upload-drag {
                border-radius: 0 !important;
                border: 0 !important;
              }
            }

            .chicun {
              width: 30.5%;
              display: inline-block;
              text-align: left;
              .select {
                width: 55%;
                height: 32px;
                vertical-align: middle;
              }
            }
            .up_li {
              width: 25.5%;
              display: inline-block;
              vertical-align: bottom;
            }
            .two_li {
              width: 20%;
            }
            .fs_li {
              width: 41%;
            }
            @media (max-width: 1400px) {
       
          .fs_li {
            width: 47%;
          }
          .two_li {
            width: 14%;
          }
        }
          }
        }
      }
    }
  }
}
.gl_tjym {
  // top: 24px;
  top: 0px;
  .tjcpym_cg {
    height: 676px !important;
  }
  .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
  .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
    position: relative;
    left: 17%;
  }
  .ant-tabs {
    top: -25px !important;
  }
  .tjcpym {
    width: 75%;
    height: 678px;
  }
  .tjcpym .tjcpym_tab .tjcpym_cg .cg_n .edit_container {
    left: 33px;
  }
  .tjcpym .tjcpym_tab .tjcpym_cg .tjcpym_gj {
    line-height: 45px;
    position: relative;
    left: 10px;
  }
  .cg_n {
    top: 5px !important;
    width: 80% !important;
    height: 80% !important;
    padding: 10px !important;
  }
  .tjcpym .tjcpym_tab .tjcpym_cg .bdyh_n {
    height: 80% !important;
  }

  .tjcpym .tjcpym_tab .tjcpym_cg .cg_n .edit_container .ql-container {
    height: 276px !important;
  }
  .ant-tabs-bar {
    // background-color: #fff !important;
    height: 230px;
    position: absolute;
    border: 0 !important;
    z-index: 999;
  }

  .ant-tabs-tab {
    display: block !important;
  }
  .tjcpym_title {
    width: 100%;
    height: 72px;
    padding: 25px 35px;
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    line-height: 20px !important;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 18px;
    }
    .anticon-close {
      font-weight: normal;
      font-size: 22px;
    }
  }
  .ant-tabs-ink-bar {
    transform: none !important;
    background-color: transparent !important;
    height: 0px !important;
  }
  .bdyh_ico {
    position: absolute;
    top: 91px !important;
    left: 119px !important;
    color: #fc6500;
    font-size: 18px;
    z-index: 999 !important;
  }
  .ant-tabs-tab-active {
    color: #1890ff;
    border-left: 3px solid #1890ff;
  }
  .tjwz .tjcpym_tab .tjcpym_cg .gj_n .wzflym {
    background: rgba(0, 0, 0, 0.1) !important;
  }
  .wzfl {
    top: 97px;
    left: 96px;
    width: 80%;
  }
}
</style>
